<template>
  <div class="app-container" style="background: #f0f2f5">
    <!-- 查询结果 -->
    <h3 v-if="nurseId === 0">请您登录护士管理员账号，来查看留言信息</h3>
    <el-row v-else>
      <el-col :span="4" :offset="4">
        <div class="clientpad">
          <div
            v-for="(info, index) in infoList"
            :key="index"
            :class="index == indexSelect? 'client client-select' : 'client client-holdon'"
            @click="gotoDetail(index, info.patientId, info.nurseId)"
            @mouseover="onMouseOver(index, $event)"
            @mouseleave="onMouseLeave(index, $event)"
          >
            <img src="@/assets/png/client.png">
            <div class="clientinfo">
              <p class="name" style="color: black">{{ info.pName }}</p>
              <p class="msgtext" style="color: #1b4671">{{ info.latestMsg }}</p>
            </div>
            <p class="time">{{ caculateTimeInClient(info.latestTime) }}</p>
          </div>
        </div>
      </el-col>
      <el-col :span="12">
        <el-card shadow="never" class="content-card">
          <div class="msg-block">
            <div
              v-for="(msg, index) in msgList"
              :key="index">
              <span>{{ msg.addTime }}</span>
              <div v-if="msg.sender === myRole" class="record record-right">
                <div class="msg">
                  <img v-if="msg.type === 'image'" :src="msg.content" @click="onClickImage(msg.content)">
                  <p v-else>{{ msg.content }}</p>
                </div>
                <img class="recordimg" src="@/assets/png/nurse.png">
              </div>
              <div v-else class="record record-left">
                <img class="recordimg" src="@/assets/png/client.png">
                <div class="msg">
                  <img v-if="msg.type === 'image'" :src="msg.content" @click="onClickImage(msg.content)">
                  <p v-else>{{ msg.content }}</p>
                </div>
              </div>
            </div>
          </div>
          <el-input
            :rows="3"
            v-model="inputMsg"
            type="textarea"
            placeholder="请输入内容"/>
          <el-button type="primary" style="text-align: right" @click="sendMsg">发送消息</el-button>
          <el-dialog :visible.sync="detailDialogVisible" title="图片">
            <img :src="msgImageUrl" style="width: 100%; object-fit: scale-down">
          </el-dialog>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { addMessage, getMessages, getMsgInfo } from '@/api/message'
export default {
  name: 'Messages',
  data() {
    return {
      indexSelect: -1,
      inputMsg: '',
      toPatient: 0,
      nurseId: 0,
      message: {
        patientId: 1,
        nurseId: 1,
        type: 'text',
        content: 'hello world',
        sender: 'p'
      },
      myRole: 'n',
      infoList: [],
      msgList: [],
      detailDialogVisible: false,
      msgImageUrl: ''
    }
  },
  created() {
    if (typeof (this.$store.getters.nurse) !== 'undefined') {
      this.nurseId = this.$store.getters.nurse.id
      this.getInfoList()
    }
  },
  updated() {
    this.scrollToBottom()
  },

  methods: {
    changeActive($event) {
      console.log('over')
      $event.currentTarget.className = 'client-card-select'
    },
    removeActive($event) {
      console.log('out')
      $event.currentTarget.className = 'client-card'
    },
    getInfoList() {
      getMsgInfo({
        patientId: 1,
        nurseId: this.nurseId,
        sender: 'n'
      }).then(response => {
        this.infoList = response.data.data
        console.log(this.infoList)
      })
    },
    gotoDetail(index, patientId, nurseId) {
      this.indexSelect = index
      this.toPatient = patientId
      getMessages({
        patientId: patientId,
        nurseId: nurseId,
        sender: 'n'
      }).then(response => {
        this.msgList = response.data.data.list
        const div = document.getElementsByClassName('msg-block')
        div.scrollTop = div.scrollHeight
        console.log(this.msgList)
      })
    },
    sendMsg() {
      this.message.sender = 'n'
      this.message.nurseId = this.nurseId
      this.message.content = this.inputMsg
      this.message.patientId = this.toPatient
      addMessage(this.message).then(response => {
        console.log(response.data.data)
        this.$notify.success({
          title: '成功',
          message: '创建成功'
        })
        this.msgList.push(response.data.data)
        this.inputMsg = ''
      })
    },
    scrollToBottom() {
      this.$nextTick(() => {
        const container = this.$el.querySelector('.msg-block')
        container.scrollTop = container.scrollHeight
      })
    },
    onMouseOver(index, $event) {
      if (index !== this.indexSelect) {
        $event.currentTarget.className = 'client client-over'
      }
    },
    onMouseLeave(index, $event) {
      if (index !== this.indexSelect) {
        $event.currentTarget.className = 'client client-holdon'
      }
    },
    onClickImage(url) {
      this.detailDialogVisible = true
      this.msgImageUrl = url
    },
    caculateTimeInClient(timeValue) {
      var now = new Date()
      var latest = new Date(timeValue)
      if (latest.getDate() === now.getDate() && latest.getMonth() === now.getMonth()) {
        return latest.getHours() + ':' + latest.getMinutes()
      } else {
        return latest.getMonth() + ':' + latest.getDate()
      }
    }
  }
}
</script>

<style>
  .client-over{
    background: #3280cf;
  }
  .client-holdon{
    background: #388dde;
  }
  .client-select{
    background: #317dca;
  }
  .clientpad{
    overflow-y: hidden;
    overflow-x: hidden;
    background: #388dde;
    height: 450px;
  }
  .client{
    padding: 10px;
    position: relative;
    height: 60px;
  }
  .client img{
    position: absolute;
    width: 40px;
    height: 40px;
    top: auto;
    bottom: auto;
    left: 10px;
    right: auto;
    display: inline-block;
  }
  .client .time{
    margin: 0;
    position: absolute;
    color: #b8b8b8;
    font-size: 12px;
    right: 10px;
    display: inline-block;
    width: 30px;
  }

  .clientinfo{
    position: absolute;
    top: auto;
    bottom: auto;
    left: 55px;
    right: 40px;
    height: 40px;
    display: inline-block;
  }
  .clientinfo .name{
    position: absolute;
    top: 0px;
    margin: 0;
  }
  .clientinfo .msgtext{
    color: #b7b7b7;
    margin: 0 0 0 0;
    text-overflow: ellipsis;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: absolute;
    bottom: 0px;
    right: 5px;
    left: 0px;
  }

  .content-card{
    position: relative;
    height: 450px;
    border-radius: 0;
  }
  .content-card .el-button{
    position: absolute;
    bottom: 10px;
    right: 10px;
  }
  .content-card .el-textarea{
    position: absolute;
    bottom: 56px;
    left: 10px;
    right: 10px;
    width: auto;
  }
  .content-card .msg-block{
    position: absolute;
    bottom: 141px;
    overflow-y: scroll;
    overflow-x: hidden;
    left: 10px;
    right: 10px;
    top:10px;
    width: auto;
    border-bottom: #e8eef5 solid 2px;
  }
  .msg-block span{
    font-size: 8px;
    text-align: center;
    width: 10%;
    color: #b8b8b8;
    margin: 10px 40% 0 40%;
  }
  /*.msg-block::-webkit-scrollbar {*/
  /*  display: none;*/
  /*}*/
  .record{
    margin: 5px 0 15px 0;
    display: flex;
    flex-direction: row;
    width: 70%;
  }
  .record-left{
    margin-right: 30%;
  }
  .record-right{
    margin-left: 30%;
    justify-content: flex-end;
  }
  .recordimg{
    width: 35px;
    height: 35px;
    margin: 0 10px;
  }
  .record .msg{
    margin: 0;
    background: #d8e8f9;
    padding: 8px;
    border-radius:10px;
  }
  .msg p{
    color: #000000;
    margin: 0;
    padding: 0;
    font-size: 14px;
  }
  .msg img{
    width: 200px;
    padding: 5px;
    object-fit: scale-down;
  }

</style>
